<template>
    <div class="contain">
        <div class="box">
            <el-row>
                <el-col :span="10">
                    <div class="c_left">
                        <div class="c_left_contain">
                            <div class="c_img"><img src="../assets/cover.png" alt=""></div>
                            <div class="text">欢迎！</div>
                            <div class="text">智学商城-后台管理系统</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="14">
                    <div class="c_right">
                        <div class="right_contain">
                            <div>登录</div>
                            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" status-icon>
                                <el-form-item prop="username" placeholder="用户名">
                                    <el-input v-model="ruleForm.username" :prefix-icon="User" placeholder="用户名" />
                                </el-form-item>
                                <el-form-item prop="password" placeholder="密码">
                                    <el-input v-model="ruleForm.password" type="password" :prefix-icon="Lock"
                                        placeholder="密码" />
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="submitForm(ruleFormRef)" style="margin:auto">
                                        登录
                                    </el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script setup lang="ts">
import { Lock, User } from '@element-plus/icons-vue'
import { onMounted, reactive, ref } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { post } from '../utils/http'
import qs from 'qs'
import cookies from 'js-cookie'
import { throttling } from '@/utils/throttling'
import {useUserInfoStore} from '@/stores/userInfo'
// import { useTagsStore } from '@/stores/tag'

const router = useRouter()
const route = useRoute()
const userInfo = useUserInfoStore()
const ruleForm = reactive({
    username: 'admin',
    password: '123456'
})

const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ]
})
let getdata: () => void

//使用节流方式，获取登录方法
onMounted(() => {
    getdata = throttling(requestLogin)
})

// 请求登录方法
const requestLogin = () => {
    const obj = { _gp: "admin", _mt: "login", ...ruleForm }
    post(obj).then(res => {
        const { data: adminToken, errmsg ,errno} = res
        if ("成功" === errmsg && 200 === errno) {
            let date = new Date()
            let time = date.getTime() + 30 * 60 * 1000
            date.setTime(time)
            cookies.set('adminToken', adminToken, { expires: date })
            userInfo.setLoginInfo(ruleForm)
            return Promise.resolve(adminToken)
        } else {
            return Promise.reject(errmsg)
        }
    }).then(res => {
        let info = { _gp: "admin", _mt: "info"}
        post(info).then(res => {
            let {data,errmsg,errno} = res
            if(200 === errno){
                userInfo.setUserInfo(data)

                if(route.query.back){
                    // useTagsStore().pushTag()
                    router.replace(route.query.back as string)
                    return
                }
                router.replace('/index/dashboard')
            }else{
                return Promise.reject(errmsg)
            }
        })
        
    }).catch(err => {
        ElMessage({
            message: err,
            duration: 1000,
            type: 'error',
        })
    })
}
//验证及提交
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            // requestLogin()
            getdata()
        } else {
            console.log('error submit!', fields)
        }
    })
}

</script>
<style scoped lang="less">
.contain {
    font-size: 1rem;
    height: 100%;
    background: url(../assets/bg.jpg) center 80% no-repeat;
    background-size: cover;

    .box {
        width: 60%;
        height: 60%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        .el-row {
            height: 100%;

            .c_left {
                background: #005DE9;
                width: 100%;
                height: 100%;
                display: flex;

                .c_left_contain {
                    margin: auto;

                    .c_img {
                        width: 40%;
                        text-align: center;
                        margin: auto;
                        border-radius: 50%;
                        box-shadow: 5px 0px 10px 0px white;
                        overflow: hidden;

                        img {
                            width: 100%;
                        }
                    }

                    .text {
                        color: white;
                        text-align: center;
                        line-height: 30px;
                    }
                }
            }

            .c_right {
                background: white;
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;

                .right_contain {
                    width: 100%;
                    display: flex;
                    height: 200px;
                    flex-direction: column;
                    justify-content: space-around;
                    align-items: center;
                }
            }
        }
    }
}

form {
    width: 70%;
}
</style>